import {ReactNode} from 'react'
import {Box, Layout, Group, Static, Divider, Button, ScaleImg, FontIcon} from '../components'
import {primaryColor} from '../styles/common-color'
import {getStaticUrl} from "../util";

const Tit = ({label, height, fontSize, divider}: { label: string, height?: string, fontSize?: string, divider?: boolean }) => (
    <Box padding='0 4%' width='100%' height={height} flex='flex'>
        {
            divider
                ? <Divider>
                    <Static label={label} fontSize={fontSize} color='rgba(0, 0, 0, 0.85)' fontWeight={400}/>
                </Divider>
                : <Static label={label} fontSize={fontSize} color='rgba(0, 0, 0, 0.85)' fontWeight={400}/>
        }
    </Box>
);

const FooterTop = ({title}: { title: string }) => (
    <div>
        <Box padding='0 4%' height='15rem' bgColor={primaryColor} flex='flex' direction='column'>
            <Group spans={[24]} marginBottoms={['2.5rem']}>
                <Static label={title} fontSize='1.625rem' color='#fff'/>
            </Group>
            <Box width='10rem'>
                <Button type="dashed" ghost title="立即使用" width='100%'/>
            </Box>
        </Box>

        <style jsx>{`
            div{
                animation: FooterTop 2s;
            }

            @keyframes FooterTop{
                0%{
                    opacity: 0;
                }
                100%{
                    opacity: 1;
                }
            }

        `}</style>
    </div>
);

const TextLeftImgRigth = ({title, content, src}: { title?: string, content?: string, src?: string }) => (
    <Box bgColor='#f3f3f3' width='100%' padding='4%' height='20rem' flex='flex' justify='space-between'>
        <Box height='100%' width='50%' flex='flex' direction='column'>
            <div className='text left'>
                <Static label={title} fontSize='1.875rem' color='rgba(0, 0, 0, 0.85)' style={{marginBottom: '1rem'}}/>
                <Static label={content} fontSize='1rem' color='rgba(113, 113, 113, 0.85)'/>
            </div>
        </Box>
        <Box height='100%' width='45%'>
            <div className='img right'>
                <ScaleImg src={src} height='100%' width='100%'/>
            </div>
        </Box>

        <style jsx>{`
            .text{
                width:100%;
                height:100%;
                display:flex;
                justify-content:center;
                align-items:center;
                flex-direction: column;
            }

            .left{
                animation-name: TextLeft;
                animation-duration: 1.5s;
                animation-fill-mode: both;
            }

            @keyframes TextLeft{
                0%{
                    opacity: 0;
                    transform:translateX(-200px);
                }
                100%{
                    opacity: 1;
                    transform:translateX(0);
                }
            }

            .img{
                height: 100%;
                width: 100%;
                background-size: 100%, 100%;
            }
            .right{
                animation-name: ImgRight;
                animation-duration: 1.5s;
                animation-fill-mode: both;
            }

            @keyframes ImgRight{
                0%{
                    opacity: 0;
                    transform:translateX(200px);
                }
                100%{
                    opacity: 1;
                    transform:translateX(0);
                }
            }
        `}</style>
    </Box>
);

const TextRightImgLeft = ({title, content, src}: { title?: string, content?: string, src?: string }) => (
    <Box bgColor='#fff' width='100%' padding='4%' height='20rem' flex='flex' justify='space-between'>
        <Box height='100%' width='45%'>
            <div className='img left'>
                <ScaleImg src={src} height='100%' width='100%'/>
            </div>
        </Box>
        <Box height='100%' width='50%' flex='flex' direction='column'>
            <div className='text right'>
                <Static label={title} fontSize='1.875rem' color='rgba(0, 0, 0, 0.85)' style={{marginBottom: '1rem'}}/>
                <Static label={content} fontSize='1rem' color='rgba(113, 113, 113, 0.85)'/>
            </div>
        </Box>

        <style jsx>{`
            .text{
                width:100%;
                height:100%;
                display:flex;
                justify-content:center;
                align-items:center;
                flex-direction: column;
            }

            .right{
                animation-name: TextRight;
                animation-duration: 1.5s;
                animation-fill-mode: both;
            }

            @keyframes TextRight{
                0%{
                    opacity: 0;
                    transform:translateX(200px);
                }
                100%{
                    opacity: 1;
                    transform:translateX(0);
                }
            }

            .img{
                height: 100%;
                width: 100%;
                background-size: 100%, 100%;
            }
            .left{
                animation-name: ImgLeft;
                animation-duration: 1.5s;
                animation-fill-mode: both;
            }

            @keyframes ImgLeft{
                0%{
                    opacity: 0;
                    transform:translateX(-200px);
                }
                100%{
                    opacity: 1;
                    transform:translateX(0);
                }
            }

        `}</style>
    </Box>
);

const InBtn = ({onClick}: { onClick?: Function }) => (
    <Box width='100%' height='6rem' bgColor='#fff' flex='flex' onClick={onClick}>
        <div className='inBtn'>
            <FontIcon icon='xiangxiajiantou' color='#848484' style={{lineHeight: "1"}}/>
            <FontIcon icon='xiangxiajiantou' color='#848484' style={{lineHeight: "1"}}/>
        </div>

        <style jsx>{`
            .inBtn{
                width:10rem;
                height:4rem;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                animation: FadeInBtn infinite 2s linear;
            }

            @keyframes FadeInBtn{
                 0% {
                    -webkit-transform: translateY(-6px);
                    transform: translateY(-6px);
                    opacity: 0;
                }
                50% {
                    -webkit-transform: translateY(-3px);
                    transform: translateY(-3px);
                    opacity: 1;
                }
                100% {
                    -webkit-transform: translateY(0px);
                    transform: translateY(0px);
                    opacity: 0;
                }
            }
        `}</style>
    </Box>
);

type LoginBoxPropsType = { children: ReactNode, height: string, width: string, title: string, tip: boolean, top: string }

const LoginBox = ({children, height, title, tip, width}: LoginBoxPropsType) => (
    <Layout>
        <div className='wrapper'>
            <Box bgColor={primaryColor} height='50%'/>
            <div className='login-box'>
                <Box bgColor='#fff' height={height} width={width} radius='4px'
                     shadow='0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04)'>
                    {
                        tip &&
                        <Box height='2.5rem'>
                            <Group spans={24} marginTops={['14px']}>
                                <Static label={title} fontSize='1rem'/>
                            </Group>
                        </Box>
                    }
                    {tip && <Divider/>}
                    <Box padding={tip && '5% 4%'}>
                        {children}
                    </Box>
                </Box>
            </div>
        </div>
        <style jsx>{`
                .wrapper{
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    display:flex;
                    flex: 1;
                    flex-direction: column;
                }
                .login-box{
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    margin-top: -${parseInt(height) / 2}rem;
                    margin-left: -${parseInt(width) / 2}rem;
                }
            `}</style>

    </Layout>
)

type mainBoxPropsType = { url: string, className: string, content: string, title: string, color?: string, justify?: string, align: string }

const MainBox = ({url, className, title, content, color, justify, align}: mainBoxPropsType) => (
    <Box height='40.625rem' width='100%' style={{backgroundSize: 'cover'}}
         bgColor={`url(${getStaticUrl(url)}) center top no-repeat`} flex='flex' padding='0 3rem' justify={justify}>
        <div className={className}>
            <Box flex='flex' direction='column' align={align || 'center'}>
                <Static label={title} fontSize='3rem' color={color}/>
                <Static label={content} fontSize='1.75rem' color='#fff'/>
            </Box>
        </div>

        <style jsx>{`
            .fade-up{
                animation: fadeInUp 1.5s;
                animation-fill-mode: both;

            }
            @keyframes fadeInUp{
                 0% {
                    opacity: 0;
                    transform: translateY(20px);
                }

                100% {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .fade-in{
                animation: fadeIn 1.5s;
                width:100%;
            }
            @keyframes fadeIn{
                0%{
                    opacity: 0;
                }
                100%{
                    opacity: 1;
                }
            }

            .fade-right{
                animation: fadeRight 1.5s;
                animation-fill-mode: both;
            }
            @keyframes fadeRight{
                0%{
                    opacity: 0;
                    transform: translateX(200px);
                }
                100%{
                    opacity: 1;
                    transform: translateX(0);
                }
            }
        `}</style>
    </Box>
);

type processPropsType = { translateX: number, label: string, icon: string, fontIcon: boolean }

const Process = ({label, icon, translateX, fontIcon}: processPropsType) => (

    <div className='process'>
        <FontIcon icon={icon} fontSize='5rem' color={primaryColor} style={{marginBottom: '1rem'}}/>
        <Static label={label} fontSize='1.25rem' color='rgba(0, 0, 0, 0.85)'/>
        {fontIcon && <div className='icon'><FontIcon icon='shuangjiantou' fontSize='1.5rem' color='#cacccc'/></div>}

        <style jsx>{`
            .process{
                animation: restore 1s 0s forwards;
                transform: translate(${translateX}%,0);
                opacity: 0;
                width: 300px;
                height: 145px;
                text-align: center;
                position: relative;
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;
            }

            .icon{
                position: absolute;
                right: 0;
                top: 55px;
                width: 2rem;
                height: 2rem;
            }

            @keyframes restore{
                0% {}

                100% {
                    opacity: 1;
                    transform: translate(0,0) rotate(0) scale(1);
                }
            }

        `}</style>
    </div>
);

const Img3D = ({url}: { url: string }) => (
    <div>
        <div className="background">
            <div className="app"/>
        </div>

        <style jsx>{`
            div{
                position: relative;
                width:100%;
                height:100%;
            }

            .background {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              perspective: 900px;
            }

            .app {
              position: absolute;
              top: 50%;
              left: 50%;
              width: 200px;
              height: 340px;
              margin: -170px 0 0 -100px;
              background: url(${getStaticUrl(url)}) 0 0 / 100% 100% no-repeat;
              box-shadow: 0px 0px 10px #e2e1e1;
              transform: rotateX(65deg) rotateY(3deg) rotateZ(-25deg);
              transform-origin:50% 50%;
              transition: all 1s;
            }
            .background:hover .app {
              transform: rotate3d(0,0,0,0deg);
              width: 100%;
              height:22rem;
              position: absolute;
              top: 50%;
              left: 17%;
              margin-top:-11rem;
              box-shadow: 0px 0px 10px #e2e1e1;
            }
        `}</style>
    </div>
)


export {LoginBox, Tit, FooterTop, TextLeftImgRigth, TextRightImgLeft, InBtn, MainBox, Process, Img3D}
